import Component from "../Component.js";
import Type from "../../experience/db/Type.js";
import { _delay, _timeout } from "../../experience/utils/F7.js";

const Feature = ol.Feature;
const Point = ol.geom.Point;
const LineString = ol.geom.LineString;
const Stroke = ol.style.Stroke;
const Text = ol.style.Text;
const Fill = ol.style.Fill;
const Style = ol.style.Style;
const Icon = ol.style.Icon;
const Overlay = ol.Overlay;

export default class Person extends Component {
    constructor() {
        super();

        const config = this.algo.getConfig();
        if (config === null) return;

        this.playbackLocked = false;
        this.playbackIndex = 0;
        this.playbacks = [];
        this.selectedTimer = null;
        this.isPositionShow = true;
        this.isPersonShow = false;
        this.isPersonNameShow = false;
        this.playbacklength = 100;
        this.playbacktimer = null;
        this.src = "../../assets/images/person/helmet_ppbak.png";
        this.rectsrc = "../../assets/images/person/rectangle.png";
        this.nickname = "../../assets/images/person/nickname.png";
        this.nickblue = "../../assets/images/person/nickname_blue.png";
        this.nickred = "../../assets/images/person/nickname_red.png";
        this.green = new Icon({ src: '../../assets/images/person/station_green.png' });
        this.red = new Icon({ src: '../../assets/images/person/station_red.png', scale: 1.2 });

        // 设置Vehicle弹出对话框
        const personcontainer = document.getElementById("ol-person-popup");
        const personcloser = document.getElementById("ol-person-closer");
        if (personcontainer !== null && personcloser !== null) {
            const self = this;
            personcloser.onclick = function () {
                self.personoverlay.setPosition(undefined);
                clearInterval(self.selectedTimer);
                self.emitter.emit("cancel-selected");
                self.selectedId = null;
                personcloser.blur();
                return false;
            };

            this.emitter.on("close-overlay", () => {
                self.personoverlay.setPosition(undefined);
                clearInterval(self.selectedTimer);
                self.emitter.emit("cancel-selected");
                self.selectedId = null;
                personcloser.blur();
            });

            this.personoverlay = new Overlay({ element: personcontainer });
            this.drawer.map.addOverlay(this.personoverlay);
        }

        const positioncontainer = document.getElementById("ol-position-popup");
        const positioncloser = document.getElementById("ol-position-closer");
        if (positioncontainer !== null && positioncloser !== null) {
            const self = this;
            positioncloser.onclick = function () {
                self.positionoverlay.setPosition(undefined);
                self.emitter.emit("cancel-selected");
                positioncloser.blur();
                return false;
            };

            this.emitter.on("close-overlay", () => {
                self.positionoverlay.setPosition(undefined);
                positioncloser.blur();
            });

            this.positionoverlay = new Overlay({ element: positioncontainer });
            this.drawer.map.addOverlay(this.positionoverlay);
        }

        // 获取轨迹线数据
        this.tracks = new Map();
        this.api.getTracks({ meta_id: config.meta_id, type: "person" }).then(t => {
            for (const data of t.data) {
                this.tracks.set(data.id, data);
            }
        });

        // 获取人员定位分站数据
        this.positions = new Map();
        this.api.getPositions({ meta_id: config.meta_id, type: "person" }).then(p => {
            for (const data of p.data) {
                this.positions.set(data.node_id, data);
            }
        });

        // 获取读卡器信息
        this.readers = new Map();
        debugger
        this.api.getReaders().then(r => {
            for (const data of r.data) {
                this.readers.set(data.readerid, data);
            }
        });

        // 获取人员数据
        this.persons = new Map();
        this.person();
    }

    clear() {
        this.playbackIndex = 0;
        this.playbackLocked = false;
        this.playbacklength = 100;
        this.$$("#person-slider").val(0);
        this.$$("#vp-footer").hide();
        this.$$("#vl-track-back").css("background", "green");
        this.$$("#vl-track-back").html("开始回放");
        clearInterval(this.playbacktimer);
    }

    person() {
        this.api.getPerson().then(response => {
            if (response.code === 0) {
                const resp = response.data;
                this.draw(resp.persons, resp.readers);
                for (const data of resp.persons) {
                    this.persons.set(data.rfid, data);
                }
            } else {
                console.log(response.message);
            }
        });
    }

    async page() {
        const name = this.$$("#person-filter-name").val();
        let filter = [];
        if (!isNaN(parseInt(name))) {
            for (const person of this.persons.values()) {
                if (person.hasOwnProperty('x') && person.hasOwnProperty('y')) {
                    if (person.rfid.includes(name)) {
                        filter.push(person);
                        continue;
                    }
                    if (person.userid.includes(name)) {
                        filter.push(person);
                    }
                }
            }
        } else {
            for (const person of this.persons.values()) {
                if (person.hasOwnProperty('x') && person.hasOwnProperty('y')) {
                    if (person.name.includes(name)) {
                        filter.push(person);
                    }
                }
            }
        }

        this.pageNum = Math.ceil(filter.length / 10);
        this.$$("#person-filter-page").html(`总计: ${ this.pageNum }页, 当前: ${ this.pageNo }页`);
        this.$$("#person-filter-table").empty();
        const index = this.pageNo - 1;
        for (let i = index * 10; i < index * 10 + 10; i++) {
            const item = filter[i], id = `person-filter-${filter[i].rfid}`;
            let tr= `
                <tr id="${id}">
                    <td class="label-cell" style="width: 40px;">${i + 1}</td>
                    <td class="label-cell" style="width: 80px;">${item.rfid}</td>
                    <td class="label-cell" style="width: 60px;">${item.userid}</td>
                    <td class="label-cell" style="width: 100px;">${item.name}</td>
                    <td class="label-cell">${item.dep}</td>
                    <td class="label-cell">${item.duty === null ? "" : item.duty}</td>
                </tr>
            `;
            this.$$("#person-filter-table").append(this.$$(tr));
            this.$$('#' + id).on("click", () => {
                const rfid = id.split("-")[2];
                const person = this.persons.get(rfid);
                const feature = new Feature();
                const style = new Style({ image: new Icon({ src: this.rectsrc, scale: 0.3}) });
                feature.setStyle(style);
                const x = this.algo.normalX(person.x);
                const y = this.algo.normalY(person.y);
                feature.setGeometry(new Point([x, y]));
                this.drawer.source(Type.Modify).addFeature(feature);
                this.drawer.map.getView().setCenter([x, y]);
                this.drawer.map.getView().setZoom(12);
                _timeout(id, () => {
                    this.drawer.source(Type.Modify).removeFeature(feature);
                }, 3000);
                this.popup.close();
            });
        }
    }

    async playback(index = 0) {
        this.toast("注意: 绿色为规定轨迹线、橙色为非规定轨迹线。");

        // 添加移动的车辆
        const person = new Feature(), playbacks = this.playbacks;
        const icon = new Icon({src: this.src, size: [60, 60]});
        person.setStyle(new Style({image: icon}));
        this.drawer.source(Type.Modify).addFeature(person);

        // 添加轨迹线
        const db = await this.db.index(Type.Track, "type", "person");
        db.forEach(item => {
            item.points.forEach(point => {
                point[0] = this.algo.normalX(point[0]);
                point[1] = this.algo.normalY(point[1]);
            });

            const feature = new Feature();
            feature.setStyle(new Style({stroke: new Stroke({width: 2, color: 'orange'})}));
            feature.setGeometry(new LineString(item.points));
            this.drawer.source(Type.Modify).addFeature(feature);
        });

        const length = this.playbacks.length;
        let i = index, flag = true, count = 0, x1, y1, x2, y2, k, distance;
        this.playbacktimer = setInterval(async () => {
            // 停止轨迹回放
            if (!this.playbackLocked || i === length - 1) {
                this.playbackIndex = i;
                this.drawer.source(Type.Modify).clear();
                clearInterval(this.playbacktimer);
                return;
            }

            const curr = playbacks[i], next = playbacks[i + 1];
            if (flag) {
                flag = false;

                // 判断当前分站是否存在,如果不存在标记为黄色
                this.$$(`#${curr.id}`).css("background-color", "rgb(255, 255, 0, 0.8)");
                const currPosition = this.positions.get(curr.rid);
                if (currPosition === undefined) {
                    i = i + 1; flag = true; return;
                }
                this.$$(`#${curr.id}`).css("background-color", "rgb(0, 255, 0, 0.8)");

                // 判断下一个分站是否存在,如果不存在标记为黄色
                this.$$(`#${next.id}`).css("background-color", "rgb(255, 255, 0, 0.8)");
                const nextPosition = this.positions.get(next.rid);
                if (nextPosition === undefined) {
                    i = i + 1; flag = true; return;
                }
                this.$$(`#${next.id}`).css("background-color", "rgb(0, 255, 0, 0.8)");

                // 计算线段位置、斜率、长度
                x1 = this.algo.normalX(currPosition.x); y1 = this.algo.normalY(currPosition.y);
                x2 = this.algo.normalX(nextPosition.x); y2 = this.algo.normalY(nextPosition.y);
                distance = this.algo.distance(x1, y1, x2, y2); k = this.algo.k(x1, y1, x2, y2);

                const center = [(x1 + x2) / 2, (y1 + y2) / 2];
                this.drawer.map.getView().animate({ center: center });
            }

            // 计算出可能在折线段上的两个坐标
            let x, y, dl = this.playbacklength * count;
            if (dl > distance) {
                person.setGeometry(new Point([x2, y2]));
                flag = true;
                count = 0;
                i = i + 1;
            } else {
                const xd1 = x1 + dl * Math.cos(k), yd1 = y1 + dl * Math.sin(k);
                const xd2 = x1 + dl * Math.cos(k + Math.PI), yd2 = y1 + dl * Math.sin(k + Math.PI);

                // 满足在折线段范围内的坐标点为正确的坐标
                if (xd1 <= Math.max(x1, x2) && xd1 >= Math.min(x1, x2)) { x = xd1; y = yd1; }
                if (xd2 <= Math.max(x1, x2) && xd2 >= Math.min(x1, x2)) { x = xd2; y = yd2; }
                person.setGeometry(new Point([x, y]));
                count = count + 1;
            }
        }, 100);
    }

    async playlist(rfnum) {
        this.clear();
        this.drawer.source(Type.Modify).clear();

        const data = await this.api.trackPlayBack2({ RfNum: rfnum });
        if (data.length === 0) {
            this.toast("未获取到人员轨迹数据。");
            return;
        }

        this.$$("#vl-title").html("轨迹回放");
        this.$$("#vl-track-back").show();
        this.$$("#vp-footer").show();

        this.$$("#pannel .page-content").empty();
        this.$$("#pannel").show();
        const div = `<div class="block"><div class="list simple-list"><ul></ul></div></div>`;
        this.$$("#pannel .page-content").append(div);

        this.playbacks = [];
        for (const item of data) {
            const id = `track-${this.utils.uuid()}`;
            this.playbacks.push({id: id, rid: parseInt(item.rid), rfid: item.rfid, time: item.intime});
            let name = item.position;
            if (name.length > 15) { name = item.position.substring(0,18) + "..."; }
            const li = `
                <li style="font-size: var(--table-row-font-size); cursor: pointer; display: flex; 
                    justify-content: space-between;" id=${id}>
                    <span>${name}</span> <span>${item.intime}</span>
                </li>
            `;
            const color = this.$$("li").css("background-color");

            this.$$("#pannel ul").append(li);
            this.$$(`#${id}`).on("click", () => {
                _delay('vehicle-playback', async () => {
                    // 正在播放时,不允许进行点击
                    if (this.playbackLocked) {
                        this.toast("正在播放时不允许选择。");
                        return ;
                    }

                    // 首先先恢复所有颜色为默认
                    for (let i = 0; i < this.playbacks.length; i++) {
                        const item = this.playbacks[i];
                        this.$$(`#${item.id}`).css("background-color", color);
                    }

                    // 将选中的列以上的列全都设置为已处理
                    for (let i = 0; i < this.playbacks.length; i++) {
                        const item = this.playbacks[i];
                        const position = this.positions.get(item.rid);
                        if (position === undefined) {
                            this.$$(`#${item.id}`).css("background-color", "rgb(255, 255, 0, 0.8)");
                        } else {
                            this.$$(`#${item.id}`).css("background-color", "rgb(0, 255, 0, 0.8)");
                        }
                        if (id === item.id) {
                            // 记录一下开始位置
                            this.playbackIndex = i;
                            break;
                        }
                    }
                }, 300);
            });
        }
    }

    draw(persons, readers) {
        this.$$("#person-num").html(persons.length);
        this.stations = new Map();
        this.positions.forEach(item => {
            const reader = this.readers.get(item.node_id);
            if (reader === undefined) return;

            const station = {
                readerid: reader.readerid,
                regname: reader.regname,
                x: item.x, y: item.y,
                num: 0, persons: []
            }
            this.stations.set(reader.readerid, station);
        });

        this.drawer.source(Type.Person).clear();
        persons.forEach((item) => {
            const readerid = parseInt(item.readerid);
            const station = this.stations.get(readerid);
            if (station === undefined) return;

            station.num += 1;
            station.persons.push(item)

            // 如果不显示人员信息
            if (!this.isPersonShow) return;

            const x = this.algo.normalX(item.x);
            const y = this.algo.normalY(item.y);

            const feature = new Feature();
            feature.setId(item.rfid);
            feature.set("type", Type.Person);
            feature.set("name", item.name);
            feature.set("sex", item.sex);
            feature.set("duty", item.duty);
            feature.set("isleader", item.isleader);
            feature.set("readerid", readerid);

            let style, src = this.nickblue;
            if (item.isleader) { src = this.nickred }
            if (this.isPersonNameShow) {
                style = new Style({
                    image: new Icon({ src: src, scale: 0.3,}),
                    text: new Text({
                        text: `${item.name}`,
                        fill: new Fill({ color: 'black' }),
                        font: `normal 10px "iconfont"`,
                        textAlign: 'center',
                        textBaseline: 'middle',
                        offsetX: 0, offsetY: 10
                    })
                });
            } else {
                style = new Style({
                    image: new Icon({ src: src, scale: 0.3,})
                });
            }

            feature.setStyle(style);
            feature.setGeometry(new Point([x, y]));
            this.drawer.source(Type.Person).addFeature(feature);
        });

        this.drawer.source(Type.Position).clear();
        if (this.isPositionShow) {
            this.rstat = new Map();
            readers.forEach(item => this.rstat.set(item.node_id, item.status));

            for (const item of this.stations.values()) {
                const status = this.rstat.get(item.readerid.toString());
                const style = new Style({
                    image: status ? this.green: this.red,
                    text: new Text({
                        text: `${item.regname} - ${item.num}`,
                        fill: new Fill({ color: 'black' }),
                        font: `normal 15px "iconfont"`,
                        textAlign: 'center',
                        textBaseline: 'middle',
                        offsetX: 0, offsetY: 20
                    })
                });
                const x = this.algo.normalX(item.x);
                const y = this.algo.normalY(item.y);
                const feature = new Feature();
                feature.setId(parseInt(item.readerid));
                feature.set("type", Type.Position);
                feature.setStyle(style);
                feature.setGeometry(new Point([x, y]));
                this.drawer.source(Type.Position).addFeature(feature);
            }
        }
    }

    template() {
        const person_popup_div = `
            <div class="popup person-filter-popup">
                <header>查找人员</header>
                <article>
                    <div class="list inline-labels no-hairlines-md">
                        <ul>
                            <li class="item-content item-input">
                                <div class="item-inner">
                                    <div class="item-input-wrap">
                                        <label for="person-filter-name">
                                            <input type="text" placeholder="按卡号、工号、姓名查询" id="person-filter-name">
                                        </label>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <div class="card data-table" style="height: 480px;">
                            <table>
                                <thead>
                                    <tr>
                                        <th class="label-cell">#</th>
                                        <th class="label-cell">卡号</th>
                                        <th class="label-cell">工号</th>
                                        <th class="label-cell">姓名</th>
                                        <th class="label-cell">部门</th>
                                        <th class="label-cell">工种</th>
                                    </tr>
                                </thead>
                                <tbody id="person-filter-table"></tbody>
                            </table>
                        </div>
                    </div>
                </article>
                <footer>
                    <span id="person-filter-prev" class="popup-page">
                        <<&nbsp;前一页&nbsp;&nbsp;&nbsp;&nbsp;
                    </span>
                    <span id="person-filter-page"></span>
                    <span id="person-filter-next" class="popup-page">
                        &nbsp;&nbsp;&nbsp;&nbsp;后一页&nbsp;>>
                    </span>
                </footer>
                <a href="#" class="popup-closer" id="person-filter-close"></a>
            </div>
        `;
        this.$$('#app').append(person_popup_div);

        const vp_footer_div = `
            <div id="vp-footer">
                <input type="range" name="slider" min="0" max="20" step="1" value="0" id="person-slider"/>
            </div>
        `;
        this.$$("#article").append(vp_footer_div);
        this.$$("#vp-footer").hide();

        const track_div = `
            <div class="page" id="pannel" style="top: 60px; width: 20vw; height: 90vh;">
                <div class="page-title">
                    <span id="vl-title">轨迹回放</span>
                    <div>
                        <div class="page-cheked">
                            <button class="button button-fill" style="background: green; cursor: pointer" 
                                id="vl-track-back">
                                开始回放
                            </button>
                            <i class="iconfont" style="font-size: 22px; cursor: pointer;" id="pannel-close">&#xe6ba;</i>
                        </div>
                    </div>
                </div>
                <div class="page-content"></div>
            </div>
        `;
        this.$$("#article").append(track_div);
        this.$$("#pannel").hide();

        const ol_position_div = `
            <div id="ol-position-popup" class="ol-popup" style="width: 620px">
                <a href="#" id="ol-position-closer" class="ol-popup-closer"></a>
                <div class="ol-vehicle-content">
                    <div>
                        <span id="ol-person-content-code"></span>|
                        <span id="ol-person-content-location"></span>|
                        <span id="ol-person-content-status"></span>|
                        <span id="ol-person-content-num"></span>
                    </div>
                    <table border="1" class="table" id="ol-person-content-table" style="width: 575px"></table>
                </div>
            </div>
        `;
        this.$$("#article").append(ol_position_div);

        const ol_person_div = `
            <div id="ol-person-popup" class="ol-popup" style="width: 420px; ">
                <a href="#" id="ol-person-closer" class="ol-popup-closer"></a>
                <button class="button button-outline color-primary"
                    style="width: 100px; height: 30px; position: absolute; right: 35px; top: 18px;" 
                    id="ol-person-playback">
                    轨迹回放
                </button>
                <div class="ol-person-content">
                    <img src="" id="ol-person-photo" alt="photo"/>
                    <div>
                        <span id="ol-person-rfid"></span><br>
                        <span id="ol-person-name"></span><br>
                        <span id="ol-person-dep"></span><br>
                        <span id="ol-person-duty"></span><br>
                        <span id="ol-person-inminetime"></span><br>
                        <span id="ol-person-location"></span>
                    </div>
                </div>
            </div>
        `;
        this.$$("#article").append(ol_person_div);
    }

    control() {
        const config = this.algo.getConfig();
        if (config === null) return;

        // 定时任务去人员信息
        setInterval(() => { this.person(); }, 2000);

        // 选择器点击Position后发送消息过来
        this.emitter.on("position-selected", () => {
            const readerid = this.emitter.params[0];
            const station = this.stations.get(readerid);
            this.$$("#ol-person-content-code").html(`编号: ${readerid}`);
            this.$$("#ol-person-content-location").html(`编号: ${station.regname}`);
            this.$$("#ol-person-content-status").html(`编号: 正常`);
            this.$$("#ol-person-content-num").html(`人数: ${station.num}`);
            this.$$("#ol-person-content-table").empty();

            if (station.num > 0) {
                const div = `<tr>
                    <th>卡号</th><th>姓名</th><th>部门</th><th>工种</th>
                    <th>入井时间</th><th>轨迹回放</th>
                </tr>`;
                this.$$("#ol-person-content-table").append(this.$$(div));
            }

            if (station.num > 5) {
                this.$$(".ol-vehicle-content").css("height", "360px");
            } else {
                this.$$(".ol-vehicle-content").css("height", "");
            }

            for (const person of station.persons) {
                const id = "p-" + person.id;
                const div = `
                    <tr>
                        <td>${person.rfid}</td> <td>${person.name}</td> <td>${person.dep}</td>
                        <td>${person.duty}</td> <td>${person.inminetime}</td>
                        <td>
                            <button class="button button-outline color-primary" 
                                style="width: 50px" id="${id}">
                                查看
                            </button>
                        </td>
                    </tr>
                `
                this.$$("#ol-person-content-table").append(this.$$(div));

                this.$$(`#${id}`).on("click", () => {
                    _delay('vehicle-positions', async () => {
                        const rfnum = id.split("-")[1];
                        await this.playlist(rfnum);
                    }, 300);
                });
            }
            const x = this.algo.normalX(station.x);
            const y = this.algo.normalY(station.y);
            this.positionoverlay.setPosition([x, y]);
            this.drawer.map.getView().setCenter([x, y]);
        });

        // 选择器点击Person后发送消息过来
        this.emitter.on("person-selected", () => {
            clearInterval(this.selectedTimer);
            const id = this.emitter.params[0];
            const person = this.persons.get(id);
            const direction = person.dir === 0 ? "前" : "后";
            const length = (person.distance / 100).toFixed(2);
            const station = this.stations.get(parseInt(person.readerid));
            if (person.photo === null) {
                this.$$("#ol-person-photo").attr("src", this.nickname);
            } else {
                this.$$("#ol-person-photo").attr("src", person.photo);
            }
            this.$$("#ol-person-rfid").html(`卡号: ${person.rfid}`);
            this.$$("#ol-person-name").html(`姓名: ${person.name}`);
            this.$$("#ol-person-dep").html(`部门: ${person.dep}`);
            this.$$("#ol-person-duty").html(`工种: ${person.duty}`);
            this.$$("#ol-person-inminetime").html(`入井时间: ${person.inminetime}`);
            this.$$("#ol-person-location").html(`位置: ${station.regname}${direction}${length}米`);

            this.$$("#ol-person-playback").on("click", () => {
                _delay('ol-person-playback', async () => {
                    await this.playlist(person.rfid);
                }, 300);
            });

            const x = this.algo.normalX(person.x);
            const y = this.algo.normalY(person.y);
            this.personoverlay.setPosition([x, y]);

            this.selectedTimer = setInterval(() => {
                const person = this.persons.get(id);
                const x = this.algo.normalX(person.x);
                const y = this.algo.normalY(person.y);
                this.personoverlay.setPosition([x, y]);
                this.drawer.map.getView().setCenter([x, y]);
            }, 1000);
        });

        this.$$("#person-positions").on("click", () => {
            this.$$("#vl-title").html("分站列表");
            this.$$("#vl-track-back").hide();
            this.$$("#pannel .page-content").empty();
            const div = `<div class="block"><div class="list simple-list"><ul></ul></div></div>`;
            this.$$("#pannel .page-content").append(div);
            for (const position of this.positions.values()) {
                const reader = this.readers.get(position.node_id);
                if (reader === undefined) continue;

                const id = `positon-${position.node_id}`;
                const li = `
                    <li style="font-size: var(--table-row-font-size); cursor: pointer;" id=${id}>
                        <span>${position.node_id} - ${reader.regname}</span>
                    </li>
                `;
                this.$$("#pannel ul").append(li);
                this.$$(`#${id}`).on("click", () => {
                    _delay('vehicle-positions', async () => {
                        const key = parseInt(id.split('-')[1]);
                        const position = this.positions.get(key);
                        const feature = new Feature();
                        const style = new Style({ image: new Icon({ src: this.rectsrc, scale: 0.3 }) });
                        feature.setStyle(style);
                        const x = this.algo.normalX(position.x);
                        const y = this.algo.normalY(position.y);
                        feature.setGeometry(new Point([x, y]));
                        this.drawer.source(Type.Modify).addFeature(feature);
                        this.drawer.map.getView().setCenter([x, y]);
                        this.drawer.map.getView().setZoom(11);
                        _timeout(id, () => {
                            this.drawer.source(Type.Modify).removeFeature(feature);
                        }, 3000);
                    }, 300);
                });
            }
            this.$$("#pannel").show();
            this.toast("点击列表选择分站。");
        });

        this.$$("#vl-track-back").on("click", () => {
            this.drawer.source(Type.Modify).clear();
            _delay('vl-track-back', async () => {
                if (this.playbackLocked) {
                    this.$$("#vl-track-back").css("background", "green");
                    this.$$("#vl-track-back").html("开始回放");
                    this.playbackLocked = false;

                    // 停止播放回放时清空图层
                    this.drawer.source(Type.Modify).clear();
                } else {
                    this.$$("#vl-track-back").css("background", "red");
                    this.$$("#vl-track-back").html("关闭回放");
                    this.playbackLocked = true;

                    // 播放回放,描画在Modify图层进行
                    await this.playback(this.playbackIndex);

                    // 关闭overlay
                    this.emitter.emit("close-overlay");
                }
            }, 300);
        });

        this.$$("#pannel-close").on("click", () => {
            this.drawer.source(Type.Modify).clear();
            this.$$("#pannel").hide();
            this.clear();
        });

        this.$$("#person-filter").on("click", async () => {
            this.$$("#person-filter-name").val("");
            this.$$("#person-filter-table").empty();
            this.popup = this.app.popup.create({ el: '.person-filter-popup' });
            this.popup.open();

            this.pageNo = 1;
            await this.page();

            this.$$("#person-filter-name").on("change", async () => {
                this.pageNo = 1;
                await this.page();
            });

            this.$$("#person-filter-prev").on("click", async () => {
                this.delay('mine-prev', async () => {
                    if (this.pageNo > 1 ) {
                        this.pageNo = this.pageNo - 1;
                    }
                    await this.page();
                }, 300);
            });

            this.$$("#person-filter-next").on("click", async () => {
                this.delay('mine-next', async () => {
                    if (this.pageNo < this.pageNum) {
                        this.pageNo = this.pageNo + 1;
                    }
                    await this.page();
                }, 300);
            });

            this.$$("#person-filter-close").on("click", async () => {
                this.popup.close();
            });
        });

        this.$$("#person-show-filter-position").on("click", e => {
            this.isPositionShow = !!this.$$(e.target).is(':checked');
            this.person();
        });

        this.$$("#person-show-filter-person").on("click", e => {
            this.isPersonShow = !!this.$$(e.target).is(':checked');
            this.person();
        });

        this.$$("#person-show-filter-name").on("click", e => {
            this.isPersonNameShow = !!this.$$(e.target).is(':checked');
            this.person();
        });

        this.$$("#person-slider").on('change', () => {
            let value = this.$$("#person-slider").val();
            value = value === "0" ? 1 : parseInt(value);
            this.playbacklength = 100 * value;
        });
    }
}